<template>
    <n-modal v-model:show="modalVisible">
        <n-card style="width: 400px" title="Create Rule" :bordered="false" size="huge" role="dialog" aria-modal="true">
            <n-form ref="formRef" inline :label-width="80" :model="formValue">
                <n-form-item :label="$t('label.ruleName')" path="user.name">
                    <n-input v-model:value="formValue.name" :maxlength="6" placeholder="输入姓名规则名称" show-count />
                </n-form-item>
                <n-form-item>
                    <n-button attr-type="button" @click="handleValidateClick">
                        {{ $t('button.addRule') }}
                    </n-button>
                </n-form-item>
            </n-form>
        </n-card>
    </n-modal>
</template>

<script setup lang='ts'>
import { computed } from 'vue';
import { generate16CharUUID } from '@/utils/index';
import { useMessage } from 'naive-ui';

const props = defineProps<{
    modelValue: boolean
}>()

const emit = defineEmits<{
    (e: 'update:modelValue', value: boolean): void,
    (e: 'finish',value:{
        name:string,
        id:string
    }):void
}>()

const modalVisible = computed({
    get: () => props.modelValue,
    set: (value) => emit('update:modelValue', value)
});
const message  = useMessage();
const formValue = reactive({
    name: ''
});
const handleValidateClick = () => {
    if (!formValue.name) return message.error('请输入规则名称');
    emit('finish',{
        name: formValue.name,
        id: generate16CharUUID()
    });
}
</script>

<style scoped lang='scss'></style>